/* ======================================================
   <!-- Coach Mark -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/_variable-and-mixin.scss';


/*
 * 1. Ripple effect 1
 * 2. Ripple Effect 2
*/


$dot-size: 20px;


.uix-coach-mark-indicator-ripple {
	position: relative;
	display: inline-block;
	background: $highlight-color1;
	height: $dot-size;
	width: $dot-size;
	border-radius: 100%;


	/*
	 ---------------------------
	 1. Ripple effect 1
	 ---------------------------
	 */
	&.uix-coach-mark-indicator-ripple--line {

		&:before,
		&:after {
			position: absolute;
			content: '';
			border-radius: inherit;
			height: 0px;
			width: 0px;
			box-shadow: 0 0 0 2px $highlight-color1;
			left: $dot-size/2;
			top: $dot-size/2;
			transform: translate(-50%, -50%);

		}

		&:after {
			height: 7px;
			width: 7px;
			box-shadow: 0 0 0 2px $highlight-color2;

		}

		&:not(.is-animating) {
			&:before {
				position: absolute;
				content: '';
				border-radius: inherit;
				height: #{$dot-size + 10};
				width: #{$dot-size + 10};
				box-shadow: 0 0 0 2px $highlight-color1;
				left: $dot-size/2;
				top: $dot-size/2;
				transform: translate(-50%, -50%);

			}
		}

		&.is-animating {
			&:before {
				animation: uix-cssAnim--dotPulseInner 2s infinite ease-out;
			}
			&:after {
				animation: uix-cssAnim--dotPpulseOuter 2s infinite ease-out;
			}

		}


	}


	/*
	 ---------------------------
	 2. Ripple Effect 2
	 ---------------------------
	 */

	&.uix-coach-mark-indicator-ripple--bg {

		box-shadow: 0 0 0 5px rgba($highlight-color1, 0.4),
					0 0 0 10px rgba($highlight-color1, 0.1);

		&.is-animating {
			animation: uix-cssAnim--dotRipple 2s linear infinite;
		}
	}

}


@keyframes uix-cssAnim--dotPulseInner {
	0% {
		height: 0;
		width: 0;
		opacity: 0;
	}
	20% {
		opacity: 1
	}
	95% {
		height: #{$dot-size*2};
		width: #{$dot-size*2};
		opacity: 0.25;
	}
	100% {
		opacity: 0;
	}
}
@keyframes uix-cssAnim--dotPpulseOuter {
	0% {
		height: 7px;
		width: 7px;
		opacity: 0;
	}
	20% {
		opacity: 1
	}
	100% {
		height: #{$dot-size*3};
		width: #{$dot-size*3};
		opacity: 0.25;
	}
}



@keyframes uix-cssAnim--dotRipple {
    0% {
		box-shadow: 0 0 0 5px rgba($highlight-color1, 0.4),
					0 0 0 10px rgba($highlight-color1, 0.1);
    }
    100% {
		box-shadow: 0 0 0 25px rgba($highlight-color1, 0),
					0 0 0 30px rgba($highlight-color1, 0);
    }
}
